<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button oncontextmenu="dw()">点我</button>

<input onmouseenter="funa1()" type="text" name="name" placeholder="鼠标移入onmouseenter"/>
<input onmouseleave="funa2()" type="text" name="name" placeholder="鼠标移出onmouseleave"/>

<input onmouseover="funb1()" type="text" name="name" placeholder="鼠标移入onmouseover"/>
<input onmouseout="funb2()" type="text" name="name" placeholder="鼠标移入onmouseout"/>


<input onkeydown="func1()" type="text" name="name" placeholder="onkeydown键盘按下"/>
<input onkeypress="func2()" type="text" name="name" placeholder="onkeypress键盘按下"/>
<input onkeyup="fund()" type="text" name="name" placeholder="onkeyup键盘抬起"/>

<input class="a" type="text" name="name" placeholder="光标获取事件"/>
<input class="a" type="text" name="name" placeholder="光标移出事件"/>
<input class="a" type="text" name="name" placeholder="输入框内容被改变事件"/>
<input class="a" type="text" name="name" placeholder="输入框只要一输入改变事件"/>
<script>
  // 常见事件:
  // 1.鼠标右键单击事件:oncontextmenu
function dw() {
  console.log("我是鼠标右键单击oncontextmenu触发的");
}
// 2.鼠标左键单击事件:onclick
// 3.鼠标移入,移出事件:
// 3-1:第1种移入移出:
// 移入:onmouseenter
function funa1(){
  console.log("我是鼠标移入onmouseenter触发的");
}
// 移出:onmouseleave
function funa2(){
  console.log("我是鼠标移出onmouseleave触发的");
}
// 3-2:第2种移入移出:
// 移入:onmouseover
function funb1(){
  console.log("我是鼠标移入onmouseover触发的");
}
// 移出:onmouseout
function funb2(){
  console.log("我是鼠标移出onmouseout触发的");
}

// 键盘事件:切记:监听器不要on
// 1.键盘按下事件:(任意键)onkeydown
function func1(){
  console.log("我是键盘按下事件:(任意键)onkeydown触发的");
}
// 2.键盘按下:(除了功能键与光标键)onkeypress
function func2(){
  console.log("我是键盘按下:(除了功能键与光标键)onkeypress触发的");
}
// 3.键盘抬起事件:(任意键)onkeyup
function fund(){
  console.log("我是键盘抬起事件:(任意键)onkeyup触发的");
}

// 表单事件:
//   1.光标获取事件:onfocus
  document.getElementsByClassName("a")[0].onfocus=function () {
    console.log("光标在输入框内我就会被触发onfocus");
  };
//   2.光标移出(失去焦点):onblur
  document.getElementsByClassName("a")[1].onblur=function () {
    console.log("光标移出输入框我就会被触发onblur");
  };
//   3.输入框内容被改变触发事件:onchange
  document.getElementsByClassName("a")[2].addEventListener("change",function (evt) {
    console.log("输入框内容改变写完后我就会被触发onchange");
  });
//   4.输入框一输入就触发的事件:oninput
  document.getElementsByClassName("a")[3].addEventListener("input",function (evt) {
    console.log("输入框只要一输入我就会触发oninput");
  });
</script>
</body>
</html>
